<template>
	<view :class="type != 2 ? 'industry_video_label' : ''" v-if="list.length">
		<template v-if="type == 2">
			<swiper class="swiper_list_user" style="width: 100%; height: 810rpx;">
				<swiper-item class="industry_video_label" v-for="(item_d, index_d) in list" :key="index_d">
					<view class="industry_video_label_item" v-for="(item, index) in item_d" :key="index" style="overflow-y: unset;">
						<view class="industry_video_detail" :style="{'background':'url('+item.image[0]+') center center / 100% no-repeat'}" @click="clickVideoDetail(item)">
							<image class="industry_video_play" :src="domain + '/uploads/def/20230702/81e09dc636713665018806f309d37481.png'" />
							<!-- <image class="industry_video_image" :src="item.image[0]" /> -->
							<view class="industry_video_label">{{item.label.label_name}}</view>
							<view class="industry_video_name_max line2">{{item.content}}</view>
						</view>
						<view class="industry_video_name line2">{{item.content}}</view>
						<view class="industry_video_author">
							<view class="industry_video_avatar"><image :src="item.author.avatar" /></view>
							<view class="industry_video_nickanme">{{item.author.nickname}}</view>
							<view class="industry_video_comment">
								<view class="industry_video_icon"><image :src="domain + '/uploads/def/20230702/acd0960093e1ad86c58b75fc8b165f04.png'" /></view>
								<!-- <view class="industry_video_num">{{item.page_view || 0}}</view> -->
								<view class="industry_video_num">{{item.hits || 0}}</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</template>
		<template v-else-if="type == 1">
			<view class="industry_video_label_item" v-for="(item, index) in list" :key="index">
				<view class="industry_video_detail industry_video_detail2" :style="{'background':'url('+item.image[0]+') center center / 100% 100% no-repeat'}" @click="clickVideoDetail(item)">
					<!-- {'background':'url('+item.image[0]+') center center / auto 100% no-repeat'} -->
					<image class="industry_video_play" :src="domain + '/uploads/def/20230702/81e09dc636713665018806f309d37481.png'" />
					<view class="industry_video_label">{{item.label.label_name}}</view>
					<view class="industry_video_name_max line2">{{item.content}}</view>
				</view>
				<view class="industry_video_name line2">{{item.content}}</view>
				<view class="industry_video_author">
					<view class="industry_video_avatar"><image :src="item.author.avatar" /></view>
					<view class="industry_video_nickanme">{{item.author.nickname}}</view>
					<view class="industry_video_comment">
						<view class="industry_video_icon"><image :src="domain + '/uploads/def/20230702/acd0960093e1ad86c58b75fc8b165f04.png'" /></view>
						<!-- <view class="industry_video_num">{{item.page_view || 0}}</view> -->
						<view class="industry_video_num">{{item.hits || 0}}</view>
					</view>
				</view>
			</view>
		</template>
		<template v-else>
			<view class="industry_video_label_item" v-for="(item, index) in list" :key="index">
				<view class="industry_video_detail" :style="{'background':'url('+item.image[0]+') center center / 100% no-repeat'}" @click="clickVideoDetail(item)">
					<image class="industry_video_play" :src="domain + '/uploads/def/20230702/81e09dc636713665018806f309d37481.png'" />
					<!-- <image class="industry_video_image" :src="item.image[0]" /> -->
					<view class="industry_video_label">{{item.label.label_name}}</view>
					<view class="industry_video_name_max line2">{{item.content}}</view>
				</view>
				<view class="industry_video_name line2">{{item.content}}</view>
				<view class="industry_video_author video_btn_list" v-if="isMy == 1" style="margin-bottom: 10rpx;">
					<view class="industry_video_btn" @click="editCommunity(item.community_id)">编辑</view>
					<view class="industry_video_btn" @click="deletePlant(item.community_id, index)">删除</view>
				</view>
				<view class="industry_video_author">
					<view class="industry_video_avatar"><image :src="item.author.avatar" /></view>
					<view class="industry_video_nickanme">{{item.author.nickname}}</view>
					<view class="industry_video_btn industry_video_btn2" v-if="isMy == 1" @click="editCommunity(item.community_id)">编辑</view>
					<view class="industry_video_btn industry_video_btn2" v-if="isMy == 1" @click="deletePlant(item.community_id, index)">删除</view>
					<view class="industry_video_comment">
						<view class="industry_video_icon"><image :src="domain + '/uploads/def/20230702/acd0960093e1ad86c58b75fc8b165f04.png'" /></view>
						<!-- <view class="industry_video_num">{{item.page_view || 0}}</view> -->
						<view class="industry_video_num">{{item.hits || 0}}</view>
					</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
import { mapGetters } from "vuex";
import { configMap } from '@/utils';
import { HTTP_REQUEST_URL } from '@/config/app';
import {
		deletePlantApi
	} from '@/api/community.js';
export default {
	components: {
	},
	data() {
		return {
			domain: HTTP_REQUEST_URL,
		}
	},
	props: {
		list: {
			type: Array|Object,
			default: () => []
		},
		type: {
			type: Number,
			value: 0
		},
		labelId: {
			type: Number,
			value: 0
		},
		isMy: {
			type: Number,
			varlue: 0
		}
	},
	computed: configMap(['hide_mer_status'], mapGetters(['isLogin','viewColor','keyColor'])),
	created() {
	},
	methods: {
		clickVideoDetail(item) {
			this.$util.Tips('/pages/short_video/nvueSwiper/index?id='+item.community_id+'&label_id='+this.labelId)
		},
		editCommunity(id) {
			this.$emit('editCommunity', id)
		},
		deletePlant(id, index) {
			let that = this;
			uni.showModal({
			    title: '提示',
			    content: `确定删除删除吗？`, // 根据需求修改内容
			    success: (res) => {
			      if (res.confirm) {
			        // 用户点击了确定按钮，进行删除操作
					deletePlantApi(id).then(res=>{
						that.$emit('delCommunity', index);
					}).catch(err=>{
						that.$util.Tips({title: err});
					})
			      } else if (res.cancel) {
			        // 用户取消了删除操作
			        console.log('用户取消了删除');
			      }
			    },
			});
		}
	}
}
</script>
<style scoped lang="scss">
.industry_video_label {
	background: #fff;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 26rpx;
	overflow-y: auto;
	.industry_video_label_item {
		width: 332rpx;
		.industry_video_detail {
			border-radius: 12rpx;
			width: 332rpx;
			height: 246rpx;
			margin: 0 auto;
			text-align: center;
			position: relative;
			.industry_video_play {
				// position: absolute;
				width: 88rpx;
				height: 88rpx;
				margin: 80rpx auto 0;
			}
			.industry_video_label {
				background: #000000;
				opacity: 0.6;
				border: 1rpx solid;
				color: #FFE60D;
				padding: 4rpx;
				position: absolute;
				right: 0;
				bottom: 0;
				border-radius: 12rpx 0 12rpx 0;
				grid-template-columns: auto;
			}
			.industry_video_image {
				width: 100%;
				border-radius: 12rpx;
			}
			.industry_video_name_max {
				display: none;
			}
		}
		.industry_video_detail2 {
			width: 330rpx;
			height: 466rpx;
			.industry_video_play {
				margin: 198rpx auto 0;
			}
		}
		.industry_video_name {
			font-size: 30rpx;
			font-weight: 500;
			color: #323232;
			line-height: 42rpx;
			margin: 20rpx 0 10rpx 0;
		}
		.industry_video_author{
			display: flex;
			flex-direction: row;
			align-items: center;
			.industry_video_avatar {
				margin-right: 12rpx;
				image{
					width: 40rpx;
					height: 40rpx;
					border-radius: 100%;
				}
			}
			.industry_video_nickanme {
				margin-right: auto;
			}
			.industry_video_btn{ 
				padding: 10rpx;
				background-color: #FFE60F;
				border-radius: 10rpx;
				margin-right: 30rpx;
				font-size: 26rpx;
				font-weight: bold;
			}
			.industry_video_btn2 {
				display: none;
			}
			.industry_video_comment {
				display: flex;
				flex-direction: row;
				align-items: center;
				.industry_video_icon {
					margin-right: 10rpx;
					image{
						width: 36rpx;
						height: 36rpx;
					}
				}
			}
		}
	}
	.industry_video_label_item:nth-child(3n-2) {
		width: 100%;
		.industry_video_detail {
			width: 100%;
			height: 320rpx;
			background-size: 100% auto!important;
			.industry_video_play {
				margin: 80rpx auto 0!important;
			}
			.industry_video_name_max {
				position: absolute;
				color: #fff;
				display: -webkit-box;
				left: 20rpx;
				right: 20rpx;
				top: 20rpx;
			}
		}
		.industry_video_name {
			display: none;
		}
		.video_btn_list {
			display: none!important;
		}
		.industry_video_btn2 {
			display: block;
		}
		.industry_video_author {
			margin-top: 20rpx;
		}
	}
}
</style>